<template>
    <div class="parameter">
        <el-row>
            <el-col :span="8">
                <div class="lefts">
                    <div class="one">
                        <div class="sanTitle">
                            <span></span>
                            镜头参数
                        </div>
                        <div class="dates pubBorder">
                            <ul>
                                <li v-for="(item, index) in list" :key="index">
                                    <h3>{{ item.name }}</h3>
                                    <p>{{ item.num }}</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="one mat16">
                        <div class="sanTitle">
                            <span></span>
                            测量目标
                        </div>
                        <div class="measure pubBorder">
                            <div class="left">
                                <img src="@/assets/img/ic_fa@2x.png" alt="">
                                <div>
                                    <h3> 0.85</h3>
                                    <p>发射率</p>
                                </div>
                            </div>
                            <div class="right">
                                <img src="@/assets/img/ic_tou@2x.png" alt="">
                                <div>
                                    <h3> 1.00</h3>
                                    <p>透过率</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="one mat16">
                        <div class="sanTitle">
                            <span></span>
                            数据存储
                        </div>
                        <div class="measure pubBorder">
                            <div class="date_left">
                                <h3>保存的数据记录（条）</h3>
                                <p>836</p>
                            </div>
                            <div class="date_right">
                                <h3>磁盘可用空间：{{ sum }}GB</h3>
                                <div class="pross">
                                    <span :style="{ 'width': average + '%' }">{{ average }}%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="16">
                <div class="rights">
                    <el-row>
                        <el-col :span="20">
                            <div class="div_left pubBorder">
                                <span class="sp1"></span>
                                <span class="sp2"></span>
                                <span class="sp3"></span>
                                <span class="sp4"></span>
                                <div class="cons">  
                                    <div class="tips">
                                         {{frontData.maxTemp }}
                                        <span></span>
                                    </div>
                                    <!-- <img v-if="frontData"  :src="frontData.url" alt="" srcset=""> -->
                                    <img class="a1" v-show="bottonDataCopy === frontData.url || bottonDataCopy === ''"  :src="frontData.url"  @load="imgOnError(frontData.url)" alt="">
                                    <img class="a2" v-show="bottonDataCopy!== frontData.url && bottonDataCopy !== ''" :src="bottonDataCopy"  @load="imgOnError(frontData.url)" alt="">                                                                                          
                                          
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="div_right">
                                <div class="zbz">
                                    <ul>
                                        <li v-for="(item, index) in scale" :key="index">
                                            <span class="sp1"></span>
                                            <span class="sp2"></span>
                                            <span class="sp3">{{ item }}</span>
                                            <span class="sp4"></span>
                                        </li>
                                    </ul>
                                </div>
                                <img src="@/assets/img/img_temp.png" alt="">
                            </div>
                        </el-col>
                    </el-row>


                </div>
            </el-col>
        </el-row>

    </div>
</template>
<script lang="ts" setup> 
import { ref, computed,onMounted,onUnmounted } from 'vue'
import { storeToRefs } from 'pinia' 
import useMainStore from '@/store/main/main'
const systemStore = useMainStore()  
// systemStore.getFrontDataActive() 
const { frontData } = storeToRefs(systemStore) 

const list = ref([
    { name: '光谱范围', num: '3.8…4.0μm' },
    { name: '视场角', num: '25.0° X 19.0°' },
    { name: 'F数', num: 'f/1.5' },
    { name: '焦距', num: '25.0mm' },
    { name: '聚焦位置（R）', num: '20051' },
    { name: '聚焦状态', num: '确认' },
])
const sum = ref(272.57)
const num = ref(150)
const average = computed(() => {
    return Math.floor((num.value / sum.value) * 100);
})
const scale = ref(['2700.0 ', '2600.0 ', '2400.0 ', '2200.0', ' 1800.0 ', '1600.0', ' 1400.0 ', '1200.0 ', '1000.0 ', '800.0'])

let bottonDataCopy = ref('')
// 图片
function imgOnError(url) {
    console.log(url,bottonDataCopy.value,'bottonDataCopy.value[index]');
    bottonDataCopy.value = url   
}


// 数据刷新
function refreshFun () {
    systemStore.getFrontDataActive()
}
// 图片刷新
function refreshImageUrl () {
    systemStore.oneImgUrl()
}
let intervalId = ref(null)
let intervalIds = ref(null)
onMounted(() => {  
    intervalId = setInterval(refreshFun, 5000);  
    intervalIds = setInterval(refreshImageUrl, 1000);  
    // 清理定时器
});
onUnmounted(() => {
    clearInterval(intervalId);
    clearInterval(intervalIds);
});

</script>

